<template>
  <div class="mt-5">
    <a-form layout="inline" :model="formState">
      <a-form-item label="归属机构" name="comId">
        <a-tree-select
          v-model:value="formState.comId"
          tree-node-filter-prop="label"
          style="width: 260px"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="comanyList"
          placeholder="请选择归属机构"
          allow-clear
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="onSearch">搜索</a-button>
      </a-form-item>
      <a-form-item>
        <a-button>重置</a-button>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" :icon="h(PlusOutlined)" @click="visible = true"
          >新增</a-button
        >
      </a-form-item>
    </a-form>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      :scroll="{ x: 1600 }"
      class="mt-5"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-tag :bordered="false" color="success" v-if="record.status === 0"
            >正常</a-tag
          >
          <a-tag :bordered="false" color="error" v-else>停用</a-tag>
        </template>
        <template v-if="column.key === 'ryqx'">
          <a-switch
            :checked="record.ryqx"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'ryqx', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'ryzh'">
          <a-switch
            :checked="record.ryzh"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'ryzh', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'khscsp'">
          <a-switch
            :checked="record.khscsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'khscsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'khxgsp'">
          <a-switch
            :checked="record.khxgsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'khxgsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'khdrsp'">
          <a-switch
            :checked="record.khdrsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'khdrsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'ysjhsp'">
          <a-switch
            :checked="record.ysjhsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'ysjhsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'ysscsp'">
          <a-switch
            :checked="record.ysscsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'ysscsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'czsp'">
          <a-switch
            :checked="record.czsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'czsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'sfbzsp'">
          <a-switch
            :checked="record.sfbzsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'sfbzsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'tgsp'">
          <a-switch
            :checked="record.tgsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'tgsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'kpsp'">
          <a-switch
            :checked="record.kpsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'kpsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'fyjmsp'">
          <a-switch
            :checked="record.fyjmsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'fyjmsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'tksp'">
          <a-switch
            :checked="record.tksp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'tksp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'dxsp'">
          <a-switch
            :checked="record.dxsp"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'dxsp', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'grjfdwjf'">
          <a-switch
            :checked="record.grjfdwjf"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'grjfdwjf', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'scfy'">
          <a-switch
            :checked="record.scfy"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'scfy', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'yscx'">
          <a-switch
            :checked="record.yscx"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'yscx', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'hcgl'">
          <a-switch
            :checked="record.hcgl"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'hcgl', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'tfgl'">
          <a-switch
            :checked="record.tfgl"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'tfgl', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'ysgl'">
          <a-switch
            :checked="record.ysgl"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'ysgl', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'fpgl'">
          <a-switch
            :checked="record.fpgl"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'fpgl', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'fyjm'">
          <a-switch
            :checked="record.fyjm"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'fyjm', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'khxx'">
          <a-switch
            :checked="record.khxx"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'khxx', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'khbqdr'">
          <a-switch
            :checked="record.khbqdr"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'khbqdr', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'khmdwh'">
          <a-switch
            :checked="record.khmdwh"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'khmdwh', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'khzyqy'">
          <a-switch
            :checked="record.khzyqy"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'khzyqy', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'yhsfmxb'">
          <a-switch
            :checked="record.yhsfmxb"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'yhsfmxb', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'ysscmxb'">
          <a-switch
            :checked="record.ysscmxb"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'ysscmxb', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'lnjfmxb'">
          <a-switch
            :checked="record.lnjfmxb"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'lnjfmxb', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'hrzbb'">
          <a-switch
            :checked="record.hrzbb"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'hrzbb', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'xqbb'">
          <a-switch
            :checked="record.xqbb"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'xqbb', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'yhmxbb'">
          <a-switch
            :checked="record.yhmxbb"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'yhmxbb', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'mjbgb'">
          <a-switch
            :checked="record.mjbgb"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'mjbgb', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'cswh'">
          <a-switch
            :checked="record.cswh"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'cswh', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'sjzd'">
          <a-switch
            :checked="record.sjzd"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'sjzd', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'rzcx'">
          <a-switch
            :checked="record.rzcx"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'rzcx', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'tzgl'">
          <a-switch
            :checked="record.tzgl"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'tzgl', checked)
            "
          />
        </template>
        <template v-else-if="column.key === 'xfmt'">
          <a-switch
            :checked="record.xfmt"
            checkedValue="1"
            unCheckedValue="0"
            @change="
              (checked: string | number | boolean) =>
                handleSwitchChange(record, 'xfmt', checked)
            "
          />
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, h, onMounted } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { getSubCompanyApi } from '#/api/core/charge';
import { getSearch, getUpdate } from '#/api/core/auth';
import { message } from 'ant-design-vue';

interface TreeNode {
  value: string;
  id: string;
  level: string;
  label: string;
  key?: string;
  children?: TreeNode[];
  isLeaf?: boolean;
}

interface ProcessedTreeItem {
  key: string;
  label: string;
  value: string;
  isLeaf: boolean;
  children: ProcessedTreeItem[];
}

const formState = reactive({
  comId: undefined as string | undefined,
  menuName: undefined as string | undefined,
  nickName: undefined as string | undefined,
});

onMounted(() => {
  getTableData();
});

// 归属机构下拉
const comanyList = ref<ProcessedTreeItem[]>([]);

// 归属机构下拉请求数据
const getTableData = () => {
  getSubCompanyApi().then((res: any) => {
    // 递归处理树形数据，保持层级结构
    const processTreeData = (tree: any[]): ProcessedTreeItem[] => {
      return tree.map((item: any) => {
        const processedItem: ProcessedTreeItem = {
          key: item.id,
          label: item.name,
          value: item.id,
          isLeaf: item.children && item.children.length > 0 ? false : true,
          children: [],
        };

        // 如果存在children，递归处理子节点
        if (item.children && item.children.length > 0) {
          processedItem.children = processTreeData(item.children);
        }

        return processedItem;
      });
    };

    const treeData = processTreeData([res.data]);
    comanyList.value = treeData;
  });
};
const columns = [
  {
    title: '用户ID',
    dataIndex: 'userId',
    key: 'userId',
    align: 'center',
    width: 120,
  },
  {
    title: '用户名称',
    dataIndex: 'userName',
    key: 'userName',
    align: 'center',
    width: 120,
  },
  {
    title: '昵称',
    dataIndex: 'nickName',
    key: 'nickName',
    align: 'center',
    width: 120,
  },
  {
    title: '公司名称',
    dataIndex: 'comName',
    key: 'comName',
    align: 'center',
    width: 150,
  },
  {
    title: '账号状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    width: 100,
  },
  {
    title: '权限管理',
    children: [
      {
        title: '人员权限',
        dataIndex: 'ryqx',
        key: 'ryqx',
        align: 'center',
        width: 100,
      },
      {
        title: '人员账号',
        dataIndex: 'ryzh',
        key: 'ryzh',
        align: 'center',
        width: 120,
      },
    ],
  },
  {
    title: '审批权限',
    children: [
      {
        title: '客户删除审批',
        dataIndex: 'khscsp',
        key: 'khscsp',
        align: 'center',
        width: 120,
      },
      {
        title: '客户修改审批',
        dataIndex: 'khxgsp',
        key: 'khxgsp',
        align: 'center',
        width: 120,
      },
      {
        title: '客户导入审批',
        dataIndex: 'khdrsp',
        key: 'khdrsp',
        align: 'center',
        width: 120,
      },
      {
        title: '应收计划审批',
        dataIndex: 'ysjhsp',
        key: 'ysjhsp',
        align: 'center',
        width: 120,
      },
      {
        title: '应收删除审批',
        dataIndex: 'ysscsp',
        key: 'ysscsp',
        align: 'center',
        width: 120,
      },
      {
        title: '冲账审批',
        dataIndex: 'czsp',
        key: 'czsp',
        align: 'center',
        width: 100,
      },
      {
        title: '收费标准审批',
        dataIndex: 'sfbzsp',
        key: 'sfbzsp',
        align: 'center',
        width: 120,
      },
      {
        title: '停供审批',
        dataIndex: 'tgsp',
        key: 'tgsp',
        align: 'center',
        width: 100,
      },
      {
        title: '开票审批',
        dataIndex: 'kpsp',
        key: 'kpsp',
        align: 'center',
        width: 100,
      },
      {
        title: '费用减免审批',
        dataIndex: 'fyjmsp',
        key: 'fyjmsp',
        align: 'center',
        width: 120,
      },
      {
        title: '退款审批',
        dataIndex: 'tksp',
        key: 'tksp',
        align: 'center',
        width: 100,
      },
      {
        title: '短信审批',
        dataIndex: 'dxsp',
        key: 'dxsp',
        align: 'center',
        width: 100,
      },
    ],
  },
  {
    title: '财务管理',
    children: [
      {
        title: '个人缴费单位缴费',
        dataIndex: 'grjfdwjf',
        key: 'grjfdwjf',
        align: 'center',
        width: 140,
      },
      {
        title: '生成费用',
        dataIndex: 'scfy',
        key: 'scfy',
        align: 'center',
        width: 100,
      },
      {
        title: '应收查询',
        dataIndex: 'yscx',
        key: 'yscx',
        align: 'center',
        width: 100,
      },
      {
        title: '红冲管理',
        dataIndex: 'hcgl',
        key: 'hcgl',
        align: 'center',
        width: 100,
      },
      {
        title: '退费管理',
        dataIndex: 'tfgl',
        key: 'tfgl',
        align: 'center',
        width: 100,
      },
      {
        title: '已收管理',
        dataIndex: 'ysgl',
        key: 'ysgl',
        align: 'center',
        width: 100,
      },
      {
        title: '发票管理',
        dataIndex: 'fpgl',
        key: 'fpgl',
        align: 'center',
        width: 100,
      },
      {
        title: '费用减免',
        dataIndex: 'fyjm',
        key: 'fyjm',
        align: 'center',
        width: 100,
      },
    ],
  },
  {
    title: '客户管理',
    children: [
      {
        title: '客户信息',
        dataIndex: 'khxx',
        key: 'khxx',
        align: 'center',
        width: 100,
      },
      {
        title: '客户标签导入',
        dataIndex: 'khbqdr',
        key: 'khbqdr',
        align: 'center',
        width: 120,
      },
      {
        title: '客户名单维护',
        dataIndex: 'khmdwh',
        key: 'khmdwh',
        align: 'center',
        width: 120,
      },
      {
        title: '客户资源迁移',
        dataIndex: 'khzyqy',
        key: 'khzyqy',
        align: 'center',
        width: 120,
      },
    ],
  },
  {
    title: '报表管理',
    children: [
      {
        title: '用户收费明细表',
        dataIndex: 'yhsfmxb',
        key: 'yhsfmxb',
        align: 'center',
        width: 140,
      },
      {
        title: '应收生成明细表',
        dataIndex: 'ysscmxb',
        key: 'ysscmxb',
        align: 'center',
        width: 140,
      },
      {
        title: '历年缴费明细表',
        dataIndex: 'lnjfmxb',
        key: 'lnjfmxb',
        align: 'center',
        width: 140,
      },
      {
        title: '换热站报表',
        dataIndex: 'hrzbb',
        key: 'hrzbb',
        align: 'center',
        width: 120,
      },
      {
        title: '小区报表',
        dataIndex: 'xqbb',
        key: 'xqbb',
        align: 'center',
        width: 100,
      },
      {
        title: '用户明细报表',
        dataIndex: 'yhmxbb',
        key: 'yhmxbb',
        align: 'center',
        width: 120,
      },
      {
        title: '面积变更表',
        dataIndex: 'mjbgb',
        key: 'mjbgb',
        align: 'center',
        width: 120,
      },
    ],
  },
  {
    title: '系统管理',
    children: [
      {
        title: '参数维护',
        dataIndex: 'cswh',
        key: 'cswh',
        align: 'center',
        width: 100,
      },
      {
        title: '数据字典',
        dataIndex: 'sjzd',
        key: 'sjzd',
        align: 'center',
        width: 100,
      },
      {
        title: '日志查询',
        dataIndex: 'rzcx',
        key: 'rzcx',
        align: 'center',
        width: 100,
      },
      {
        title: '通知管理',
        dataIndex: 'tzgl',
        key: 'tzgl',
        align: 'center',
        width: 100,
      },
      {
        title: '消费模版',
        dataIndex: 'xfmt',
        key: 'xfmt',
        align: 'center',
        width: 100,
      },
    ],
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: 150,
    fixed: 'right',
  },
];
const dataSource = ref([]);
const companyOptions = ref<TreeNode[]>([]);
const visible = ref(false);
// const getSubCompany = () => {
//   getSubCompanyApi().then((res: any) => {
//     console.log(res);
//     companyOptions.value = formatTreeData([{ ...res.data }]);
//     console.log(companyOptions.value);
//     // console.log();
//   });
// };
// getSubCompany();
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const onSearch = () => {
  const query = {
    comId: formState.comId,
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
  };
  getSearch(query).then((res: any) => {
    console.log(res);
    dataSource.value = res.data.data.data;
    pagination.total = res.data.data.total;
  });
};

// 处理开关状态变化
const handleSwitchChange = async (
  record: any,
  field: string,
  checked: string | number | boolean,
) => {
  console.log(checked);
  try {
    const updateData = {
      userId: record.userId,
      [field]: checked,
    };

    const response = await getUpdate(updateData);

    if (response.data.code === 200) {
      // 更新本地数据
      record[field] = checked ? '1' : '0';
      message.success('权限更新成功');
      onSearch();
    } else {
      message.error(response.data.message || '权限更新失败');
      // 如果更新失败，恢复开关状态
      record[field] = checked ? '0' : '1';
    }
  } catch (error) {
    console.error('更新权限失败:', error);
    message.error('权限更新失败');
    // 如果更新失败，恢复开关状态
    record[field] = checked ? '0' : '1';
  }
};
</script>
<style scoped></style>
